<template>
	<view style="background-color: #f8f8f8;">
		<view class="menu_user_list">
			
			<view class="search_box">
				<view class="search_borderzz">
					<image class="sousuo" :src="photo_cdn+'/zpupload/static/zuzhi/sousuo.png'" mode=""></image>
					<input  v-model="sousuo" confirm-type="search"  class="search_input" placeholder="家谱是什么"></input>
				</view>
			</view>
			
			<view class="" style="margin-top: 25rpx; padding: 0rpx 20rpx 0rpx 20rpx;"   >
				<view class=""  v-for="(item,index) in list" :key="index" style="margin-top: 25rpx;" @tap="jump('/pages/bbs/content/content?id='+item.id)" >
					<view class="" style="display: flex; align-items: center;" >
						<view class="">
							<image :src="photo_cdn + item.avatar" mode="" style="width: 70rpx; height: 70rpx; border-radius: 50%;" ></image>
						</view>
						<view class="" style="margin-left: 15rpx; font-size: 25rpx;">
							<view class="">
								话题创建者:{{item.nickname || ''}}
							</view>
							<view class="">
								创建时间:{{item.create_time_text || ''}}
							</view>
						</view>
					</view>
					<view class="" style="font-size: 40rxp; font-weight: bold;">
						{{item.title || ''}}
					</view>
					<view class=""  style="border-bottom: 1rpx solid #808080; margin-bottom: 15rpx;">
							<image :src="photo_cdn + item.picurl" mode="" style="width: 130rpx; height: 130rpx;" ></image>
					</view>
					
					<view class="" >
						<view class="" style=" display: flex; align-items: center; justify-content: space-between;">
							<view class="" style="font-size: 35rpx;align-items: center; display: flex; color: #808080; margin-left: 25rpx;">
								<image style="width: 35rpx; height: 35rpx; margin-right: 10rpx;"  :src="photo_cdn+'/zpupload/static/bbs/view1.png'"></image>
								{{item.view || 0}}
							</view>
							<view class="" style="font-size: 35rpx;align-items: center; display: flex; color: #808080; margin-left: 25rpx;">
								<image v-if="dianzanval == null" style="width: 35rpx; height: 35rpx; margin-right: 10rpx;" :src="photo_cdn+'/zpupload/static/bbs/zan1.png'"></image>
								
								{{item.agree || 0}}
							</view>
							<view class="" style="font-size: 35rpx;align-items: center; display: flex; color: #808080; margin-left: 25rpx;">
								<image style="width: 35rpx; height: 35rpx; margin-right: 10rpx; color: #808080; ":src="photo_cdn+'/zpupload/static/bbs/xiaoxi1.png'"></image>
								{{item.re_count || 0}}
							</view>
						</view>
					</view>
				</view>
			</view>
			
			
			
			
<!-- 			<view class=""  style="margin-top: 10rpx;">
				<view class="" style="display: flex; align-items: center;">
					<view class="" >
						<image :src="photo_cdn + sort.logo" mode="" style="width: 100rpx; height: 100rpx; border-radius: 50%;" ></image>
					</view>
					<view class="" style="margin-left: 15rpx;">
						<view class="" style="font-size: 45rpx;">
							#{{sort.name || ''}}#
						</view>
						<view class="">
							{{sort.seo_description || ''}}
						</view>
						<view class="" style="display: flex; justify-content: space-between; width: 100%;">
							<view class="" >
								<view class="" style="display: flex;align-items: center;">
									<view class="" v-for="(item,index) in users" :key="index" >
										<image :src="photo_cdn+item.avatar" style="width: 28rpx; height: 28rpx;border-radius: 15rpx;" ></image>
									</view>
									<view class="" style="background-color: #B13B3B; border-radius: 30rpx;font-size: 16rpx; color: #fff; display: flex; justify-content: center;align-items: center;padding-left: 15rpx; padding-right: 15rpx;">
										{{user_num || '0'}}人
									</view>
								</view>
							</view>
							<view class="" style="display: flex; margin-left: 80rpx;">
								<view class="">
									<image style=" height: 30rpx; width: 30rpx;" :src="photo_cdn+'/zpupload/static/bbs/Fire.png'"></image>
								</view>
								<view class="">
									{{view || '0'}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="" style="display: flex; justify-content: space-between; border-bottom: 1rpx solid #808080;">
					<view class="">
						创建者:{{sort.nickname || ''}}
					</view>
					<view class="">
						创建时间:{{sort.create_time || ''}}
					</view>
				</view>
				
				<view class="" style="margin-top: 30rpx;">
					<view class=""  @tap="fabufun(sort.id)" style="width: 100%; border: 1rpx solid #808080; display: flex; justify-content: center;font-size: 40rpx; border-radius: 25rpx; ">
						发布话题
					</view>
					
				</view>
				
				<view class="" style="margin-top: 25rpx;" v-if="showOpen">
					<view class=""  v-for="(item,index) in list" :key="index" style="margin-top: 25rpx;" @tap="jump('/pages/bbs/content/content?id='+item.id)" >
						<view class="" style="display: flex; align-items: center;" >
							<view class="">
								<image :src="photo_cdn + item.avatar" mode="" style="width: 70rpx; height: 70rpx; border-radius: 50%;" ></image>
							</view>
							<view class="" style="margin-left: 15rpx; font-size: 25rpx;">
								<view class="">
									话题创建者:{{item.nickname || ''}}
								</view>
								<view class="">
									创建时间:{{item.create_time_text || ''}}
								</view>
							</view>
						</view>
						<view class="" style="font-size: 40rxp; font-weight: bold;">
							{{item.title || ''}}
						</view>
						<view class=""  style="border-bottom: 1rpx solid #808080; margin-bottom: 15rpx;">
								<image :src="photo_cdn + item.picurl" mode="" style="width: 130rpx; height: 130rpx;" ></image>
						</view>
						
						<view class="" >
							<view class="" style=" display: flex; align-items: center; justify-content: space-between;">
								<view class="" style="font-size: 35rpx;align-items: center; display: flex; color: #808080; margin-left: 25rpx;">
									<image style="width: 35rpx; height: 35rpx; margin-right: 10rpx;"  :src="photo_cdn+'/zpupload/static/bbs/view1.png'"></image>
									{{item.view || 0}}
								</view>
								<view class="" style="font-size: 35rpx;align-items: center; display: flex; color: #808080; margin-left: 25rpx;">
									<image v-if="dianzanval == null" style="width: 35rpx; height: 35rpx; margin-right: 10rpx;" :src="photo_cdn+'/zpupload/static/bbs/zan1.png'"></image>
									
									{{item.agree || 0}}
								</view>
								<view class="" style="font-size: 35rpx;align-items: center; display: flex; color: #808080; margin-left: 25rpx;">
									<image style="width: 35rpx; height: 35rpx; margin-right: 10rpx; color: #808080; ":src="photo_cdn+'/zpupload/static/bbs/xiaoxi1.png'"></image>
									{{item.re_count || 0}}
								</view>
							</view>
						</view>
					</view>
				</view>
				
				<view class="" style="margin-top: 25rpx;" v-else >
					
					<view style="width: 100%; display: flex; justify-content: center; font-size: 40rpx;">
						暂无数据
					</view>
				</view>	
			</view> -->
			
			
			
			
			
		</view>
	</view>
</template>

<script>
	import {bbsGetSortInfo,bbssetContentReply} from "@/utils/api/bbs.js";
	import config from "@/utils/config.js";
	let {photo_cdn} = config.baseUrl;
	export default {
		data() {
			return {
				photo_cdn,
				sort:{
					logo:null,
				},
				list:[
					{
						agree:null
					}
				],
				user_num:null,
				users:[
					{avatar:null}
				],
				view:null,
				indexId:null,
				dianzanval:null,
				showOpen:true,
				
				
				sousuo:''
				
			}
		},
		onLoad(option) {
			this.indexId = option.id;
			this.getList();
		},
		methods: {
			fabufun(e){
				uni.navigateTo({
					url: '/pages/bbs/fabucontent/fabucontent?id='+e
				})
			},
			getList(){
				bbsGetSortInfo({
					id:this.indexId
				}).then(res=>{
					console.log(res)
					this.sort= res.data.sort;
					this.list = res.data.list;
					this.user_num = res.data.user_num;
					this.users = res.data.users;
					this.view = res.data.view;
					
					if(this.list.length == 0){
						this.showOpen = false;
					}
				})
			},
			//跳转
			jump(e){
				console.log(e)
				uni.navigateTo({
					url:e
				})
			},
		}
	}
</script>

<style lang="scss">
	.lable_textarea_tag{
		width: 100%;
		padding: 30rpx;
		height: 320rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		box-sizing:border-box;
	}
	.menu_user_list{
		padding: 20rpx 0;
		margin: 20rpx;
		box-shadow: 8rpx -4rpx 2rpx 2rpx #F8F8F8;
	}
	
	
	.paihangone{
		font-weight: bold;
		color: #000000;
	}
	
	.paihangtow{
		color: #949494;
	}
	
	
	
	.text-ellipsisOne{
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}
	
	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}
	
	.menu_user_list{
		padding: 20rpx 0;
		margin: 10rpx;
		box-shadow: 8rpx -4rpx 2rpx 2rpx #F8F8F8;
	}
	
	.search_box{
		width: 100%;
		display: flex;
		align-items: center;
		padding: 0 10rpx;
		box-sizing: border-box;
		/* #ifdef MP-WEIXIN */
		padding-right: 28%;
		/* #endif */
	}
	
	.search_borderzz{
		position:relative;
		margin: 20rpx;
		// border: 1px solid $themecolor;
		height: 68rpx;
		border-radius: 33rpx;
		background:#fff;
		width: 100%;
		.search_input{
			padding-left:70rpx;
			height: 68rpx;
			line-height: 70rpx;
			color:#000000;
			font-size: 28rpx;
		}
		.sousuo{
			position: absolute;
			z-index:2;
			left: 30rpx;
			top: 20rpx;
			width: 27rpx;
			height: 27rpx;
		}
		.search_subbtn{
			position: absolute;
			right: 15rpx;
			top: 6rpx;
			z-index:2;
			width: 100rpx;
			height: 50rpx;
			line-height:50rpx;
			background: $themecolor;
			border-radius: 28rpx;
			text-align:center;
			color:#FFFFFF;
			font-size:28rpx;
		}
	}
</style>
